<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中科大客户关系管理系统</title>
<link rel="stylesheet" type="text/css" href="css_js/resources/css/ext-all.css"/>

<script type="text/javascript" src="css_js/ext-base.js"></script>
<script type="text/javascript" src="css_js/ext-all.js"></script>
<script type="text/javascript" src="css_js/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
var westWidth = 230;
Ext.onReady(function(){
	
	var newsPanel = new Ext.Panel({
		region:'north',
		title:'公告新闻',
		width:200,
		contentEl:'crmNews'
		
	});
	
	var accrodionPanel = new Ext.Panel({
		region:'center',
		layout:'accordion',
		width:200,
		layoutConfig:{
			titleCollapse:true,//标题栏任意点击激活伸缩
			animate:true,//动画效果
			activeOnTop:false
		},
		items:[
		{
			title:'<span style="color:#16376c;font-size:12px; font-weight:bold;">标题</span>',
			contentEl:'m1',
			iconCls:'crmIcon',
			bodyStyle:'background-color:#f7fcff;'
		},
		{
			title:'<span style="color:#16376c;font-size:12px; font-weight:bold;">标题</span>',
			contentEl:'m2',
			iconCls:'crmIcon',
			bodyStyle:'background-color:#f7fcff;'
		},
		{title:'<span style="color:#16376c;font-size:12px; font-weight:bold;">标题</span>',html:'内容',iconCls:'crmIcon'}
		]
	});
	
	var westPanel = new Ext.Panel({
		title:'west',
		layout:'border',
		collapsible:true,
		region:'west',
		width:200,
		listeners:{
			'collapse':function(node,e){
				westWidth = 60;
				setItemsMiddle(westWidth);
				setItemHMiddle();
			},
			'expand':function(node,e){
				westWidth = 230;
				setItemsMiddle(westWidth);
				setItemHMiddle();
			}
		},
		items:[newsPanel,accrodionPanel]
	});
	
	var viewport = new Ext.Viewport({
		layout:'border',
		items:[{
			region:'north',//位置
			contentEl:'north',
			height:104
		}
		,westPanel,{
			region:'center',//位置
			contentEl:'mainHtml'
		}
		]
	});
	
	setItemsMiddle(westWidth);
	setItemHMiddle();
});

var $ = function(str){
	return document.getElementById(str);
}

Ext.EventManager.onWindowResize(function(width,height){
	setItemsMiddle(westWidth);
	setItemHMiddle();
});

function setItemsMiddle(westWidth){

	var bodyWidth = document.body.clientWidth - westWidth;
	for(var i = 1; i <= 3; i++){
		$("icon"+i+"_2").style.width = bodyWidth - $("icon1_1").clientWidth - $("icon1_3").clientWidth + "px";
		var icon_h1 = $("icon"+i+"_2").getElementsByTagName("h1")[0];
		icon_h1.style.left = ($("icon"+i+"_2").clientWidth - icon_h1.clientWidth)/2 + "px";
	}
}
function setItemHMiddle(){
	
	var bodyHeight = document.body.clientHeight - 104;
		itemHeight = bodyHeight - $("icon1").clientHeight - $("icon3").clientHeight + "px";
	
	$("icon2").style.height = itemHeight;
	for(var i = 1; i <= 3; i++){
		$("icon2_"+ i +"").style.height = itemHeight;
	}
}
</script>

<style type="text/css">
	*{padding:0;margin:0;}
	#crmNews{font-size:14px; height:75px; padding-top:5px; padding-left:10px; background-color:#f1ffff}
	#crmNews ul{list-style-type:none;}
	#crmNews ul li{height:23px;}
	.crmIcon{background:url(images/title_icon.jpg) no-repeat;}
	.m{width:200px; font-size:12px;}
	.m ul{list-style-type:none; width:190px;}
	.m ul li{width:80px; height:96px; padding-left:5px; float:left; font-size:14px; text-align:center;}
	.leftItemBg{margin-left:5px; width:65px; height:86px;}
	.leftItemText{width:80px; text-align:center; padding-left:4px;}
	
	
	#mainHtml{background-color:#f5f6f7; height:100%; width:100%; overflow:auto;}
	#mainHtml h1{font-size:14px;position:absolute; bottom:15px; left:70px;}
	#mainHtml span{color:#FF0000;}
	#icon1{background:url(images/icon1_bg.jpg) repeat-x; height:160px; width:100%;}
	#icon1_1,#icon1_2,#icon1_3{height:160px;  text-align:center; position:relative;}
	#icon1_1{background:url(images/icon1_1.jpg) center top no-repeat;width:230px;float:left;}
	#icon1_2{background:url(images/icon1_2.jpg) center top no-repeat;float:left; width:175px;}
	#icon1_3{background:url(images/icon1_3.jpg) center top no-repeat;width:248px;float:right;}
	#icon2{height:160px; width:100%;}
	#icon2_1,#icon2_2,#icon2_3{height:160px;  text-align:center; position:relative;}
	#icon2_1{background:url(images/icon2_1.jpg) center center no-repeat;width:230px;float:left;}
	#icon2_2{background:url(images/icon2_2.jpg) center center no-repeat;float:left; width:175px;}
	#icon2_3{background:url(images/icon2_3.jpg) center center no-repeat;width:248px;float:right;}
	#icon3{background:url(images/icon3_bg.jpg) repeat-x; height:164px; width:100%;}
	#icon3_1,#icon3_2,#icon3_3{height:164px;  text-align:center; position:relative;}
	#icon3_1{background:url(images/icon3_1.jpg) center top no-repeat;width:230px;float:left;}
	#icon3_2{background:url(images/icon3_2.jpg) center top no-repeat;float:left; width:175px;}
	#icon3_3{background:url(images/icon3_3.jpg) center top no-repeat;width:248px;float:right;}
</style>
</head>

<body>
<div id="north">
<div id="top" style="background-image:url(images/title_bg.jpg); height:82px;">
	<div id="logo" style="float:left; margin-left:25px;"><img src="images/logo.jpg" /></div>
	<div id="about" style="float:right; margin-right:140px;"><img src="images/about.jpg" /></div>
	<div id="exit" style="float:right; margin-right:60px;"><img src="images/exit.jpg" /></div>
</div>
<div id="wel" style="background-color:#1c71c1; height:22px; font-size:12px; color:#FFFFFF; padding-left:25px; line-height:22px;">欢迎您：中科大CRM管理员</div>
</div>
<div id="west">西</div>
<div id="center">中</div>

<div id="crmNews">
	<ul>
		<li><img src="images/news_icon.jpg" />&nbsp;&nbsp;中科大招生简章.</li>
		<li><img src="images/news_icon.jpg" />&nbsp;&nbsp;中科大选课系统.</li>
		<li><img src="images/news_icon.jpg" />&nbsp;&nbsp;瀚海星云论坛.</li>
	</ul>
</div>
<div id="m1" class="m">
	<ul>
		<li><div style="background:url(images/m1_1.jpg) center no-repeat;" class="leftItemBg"></div><div class="leftItemText">客户拜访</div></li>
		<li><div style="background:url(images/m1_2.jpg) center no-repeat;" class="leftItemBg"></div><div class="leftItemText">联系人管理</div></li>
		<li><div style="background:url(images/m1_3.jpg) center no-repeat;" class="leftItemBg"></div><div class="leftItemText">拜访记录</div></li>
		<li><div style="background:url(images/m1_4.jpg) center no-repeat;" class="leftItemBg"></div><div class="leftItemText">分析与报表</div></li>
	</ul>
</div>
<div id="m2" class="m">
	<ul>
		<li><div style="background:url(images/m1_1.jpg) center no-repeat;" class="leftItemBg"></div><div class="leftItemText">客户拜访</div></li>
		<li><div style="background:url(images/m1_2.jpg) center no-repeat;" class="leftItemBg"></div><div class="leftItemText">联系人管理</div></li>
		<li><div style="background:url(images/m1_3.jpg) center no-repeat;" class="leftItemBg"></div><div class="leftItemText">拜访记录</div></li>
		<li><div style="background:url(images/m1_4.jpg) center no-repeat;" class="leftItemBg"></div><div class="leftItemText">分析与报表</div></li>
	</ul>
</div>

<div id="mainHtml">
	<div id="icon1">
		<div id="icon1_1"><h1>过期用户 <span>0</span> 个</h1></div>
		<div id="icon1_2"><h1>过期用户 <span>0</span> 个</h1></div>
		<div id="icon1_3"><h1>过期用户 <span>0</span> 个</h1></div>
	</div>
	
	<div id="icon2">
		<div id="icon2_1"><h1>过期用户 <span>0</span> 个</h1></div>
		<div id="icon2_2"><h1>过期用户 <span>0</span> 个</h1></div>
		<div id="icon2_3"><h1>过期用户 <span>0</span> 个</h1></div>
	</div>
	<div id="icon3">
		<div id="icon3_1"><h1>过期用户 <span>0</span> 个</h1></div>
		<div id="icon3_2"><h1>过期用户 <span>0</span> 个</h1></div>
		<div id="icon3_3"><h1>过期用户 <span>0</span> 个</h1></div>
	</div>
	
</div>

</body>
</html>
